<template>
  <div class="flex-app-continer" :class="{ 'is--maximize': maxdiv }">


    <vxe-toolbar :refresh="{ query: queryConfigRole }" size="mini" style="margin-top: 3px">
          </vxe-toolbar>
          <div class="flex-app-continer-table-div">
            <vxe-table
              :loading="loadingTable1" style="overflow: auto; width: 100%" :print-config="{}" :export-config="{}"
              height="500px" @cell-click="clickxTable1" auto-resize border ref="xTable1" resizable size="mini"
              show-header-overflow highlight-current-row stripe :show-overflow="true" highlight-hover-row header-align="center"
              :data="tableData1"
              :checkbox-config="{ highlight: true, range: true, trigger: 'row' }"
            >
              <vxe-column align="center" type="checkbox" width="50"></vxe-column>
              <vxe-column align="center" type="seq" title="序号" width="60"></vxe-column>
              <vxe-column field="roleName" title="角色名称" align="left"></vxe-column>
              <vxe-column field="deptCodeName" title="部门名称" align="left"></vxe-column>
              <!-- <vxe-column field="companyId" width="100" title="是否自定义" align="center">
                <template v-slot="{ row }">
                  <el-tag color="cyan" v-if="row.companyId!=='0'">是</el-tag>
                  <el-tag color="red" v-else>否</el-tag>
                </template>
              </vxe-column> -->
              <template #empty>
                <img width="300px" src="@/assets/nodata2.png"/>
              </template>
            </vxe-table>
            </div>

    <split-pane :min-percent="20" :default-percent="35" split="vertical">
<!--       <template slot="paneL">
        <div class="flex-app-continer-inner" style="padding-left: 5px;padding-right: 5px;">
          <vxe-toolbar :refresh="{ query: queryConfigRole }" size="mini" style="margin-top: 3px">
          </vxe-toolbar>
          <div class="flex-app-continer-table-div">
            <vxe-table
              :loading="loadingTable1" style="overflow: auto; width: 100%" :print-config="{}" :export-config="{}"
              height="500px" @cell-click="clickxTable1" auto-resize border ref="xTable1" resizable size="mini"
              show-header-overflow highlight-current-row stripe :show-overflow="true" highlight-hover-row header-align="center"
              :data="tableData1"
              :checkbox-config="{ highlight: true, range: true, trigger: 'row' }"
            >
              <vxe-column align="center" type="checkbox" width="50"></vxe-column>
              <vxe-column align="center" type="seq" title="序号" width="60"></vxe-column>
              <vxe-column field="rolename" title="角色名称" align="left"></vxe-column>
              <vxe-column field="companyId" width="100" title="是否自定义" align="center">
                <template v-slot="{ row }">
                  <el-tag color="cyan" v-if="row.companyId!=='0'">是</el-tag>
                  <el-tag color="red" v-else>否</el-tag>
                </template>
              </vxe-column>
              <template #empty>
                <img width="300px" src="@/assets/nodata2.png"/>
              </template>
            </vxe-table>
          </div>
        </div>
      </template> -->
    <!--   <template slot="paneR">
        <div class="flex-app-continer-inner" style="padding-left: 5px;padding-right: 5px;">
          <el-tag color="orange" size="large" style="padding: 3px;">
            {{ selectRow.roleName }}&nbsp;&nbsp;
            <span v-if="selectRow.id ==='3'">
             企业信息设置：本角色支持进行企业设置。如需更改，请至企业账号管理权限功能进行设置。</span
            >
            <span v-if="selectRow.id ==='4'"
            >费用数据分析：本角色支持进行企业统计数据查看。一般为企业高管，需要对企业的费用数据进行掌握和分析。</span
            >
            <span v-if="selectRow.id ==='5'"
            >费用数据审核、请款、付款：本角色支持进行财务设置、受理业务审批后的费用单据审批流程、提交请款、付款。一般为企业的财务人员。</span
            >
            <span v-if="selectRow.id === '6'"
            >终极审核请款：本角色支持对财务提交的请款进行审批。一般为企业的财务总监或者老板，有权限对企业的付款进行终极审核。</span
            >
            <span v-else>
              {{ selectRow.description }}
            </span>
          </el-tag>
          <div style="display: flex; position: relative">
            <vxe-form
              ref="form3"
              :data="formData"
              @submit="queryUserByRole"
              size="mini"
              title-align="left"
              title-width="40"
            >
              <vxe-form-item title="姓名:" field="realname" align="center" title-align="left" :item-render="{}">
                <template v-slot>
                  <vxe-input v-model="formData.realname" placeholder="请输入员工姓名" clearable></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item>
                <template v-slot>
                  <vxe-button v-show="false" type="submit" status="primary"></vxe-button>
                </template>
              </vxe-form-item>
            </vxe-form>
            <div style="margin-top: 8px; position: absolute; right: 0;">
              <vxe-button @click="queryUserByRole" status="primary" type="submit">查询</vxe-button>
              <vxe-button @click="reset1">重置</vxe-button>
            </div>
          </div>
          <vxe-toolbar size="mini" :refresh="{ query: queryUserByRole }" export custom print>
            <template v-slot:buttons>
            </template>
            <template v-slot:tools>
              <vxe-button title="列大小" transfer class="dropdowns-button-hide-arrow" round circle>
                <template #default>
                  <svg-icon icon-class="colum-height"/>
                </template>
                <template #dropdowns>
                  <vxe-button type="text" size="medium" @click="tableSize='medium'">大</vxe-button>
                  <vxe-button type="text" size="small" @click="tableSize='small'">中</vxe-button>
                  <vxe-button type="text" size="mini" @click="tableSize='mini'">小</vxe-button>
                </template>
              </vxe-button>
              <vxe-button title="最大化" size='mini' :icon="maxdiv?'vxe-icon--zoomout':'vxe-icon--zoomin'"
                          style='margin-right: 12px;' circle
                          @click="maxdiv=!maxdiv"></vxe-button>
            </template>
          </vxe-toolbar>

          这个地方需要注释掉
          <div class="flex-app-continer-table-div">
            <vxe-table style="overflow: auto; width: 100%" :print-config="{}" :export-config="{}" height="auto"
                       :checkbox-config="{ highlight: true, range: true, trigger: 'cell' }" auto-resize border
                       ref="xTable2" resizable :size="tableSize" show-header-overflow highlight-current-row stripe
                       show-overflow highlight-hover-row header-align="center" :loading="loadingTable2"
                       :data="tableData2">
              <vxe-column align="center" type="seq" title="序号" width="60"></vxe-column>
              <vxe-column field="avatar" title="头像" width="70" align="center" header-align="center">
                <template v-slot="{ row }">
                  <template>
                    <a-avatar v-if="row.avatar" :src="row.avatar"/>
                  </template>
                </template>
              </vxe-column>
              <vxe-column field="realname" title="姓名" width="120"></vxe-column>
              <vxe-column field="phone" title="电话" width="100" align="center"></vxe-column>
              <vxe-column field="workNo" title="员工编号" width="100" align="right" header-align="center"></vxe-column>
              <vxe-column field="departName" title="部门名称" width="120"></vxe-column>
              <vxe-column field="createByUserRealName" title="维护人" width="120"></vxe-column>
              <vxe-column field="createTime" title="维护时间" width="150" align="center"></vxe-column>
              <template #empty>
                <img width="300px" src="@/assets/nodata2.png"/>
              </template>
            </vxe-table>
          </div>


        </div>
      </template> -->
    </split-pane>
  </div>
</template>
<script>
import splitPane from 'vue-splitpane'
import DepartUser from '@/components//sys/DepartUser.vue'
import {postAction, getRequest} from "@/api/manage.js";
import {mixin} from '@/utils/mixin.js'
// import Template from '@views/template'

export default {
  name: 'SysRole',
  components: {
    // Template,
    splitPane,
    DepartUser,
  },
  mixins: [mixin],
  props: {
    companyId: {
      type: String
    },
  },
  data() {

    return {
      selectRow: {},
      loadingTable1: false,
      loadingTable2: false,
      loadingmodal1: false,
      loadingmodal2: false,
      tableData1: [],
      tableData2: [
        {
          realname:'唐开放'
        }
      ],
      formData: {},
    }
  },
  computed: {},
  methods: {
    getData() {
      return this.$refs.xTable1.getCheckboxRecords();
    },
    reset1() {
      this.formData = {}
    },
    clickxTable1({row}) {
      this.selectRow = row
      this.queryUserByRole()
    },

    async queryUserByRole() {
      let selectStatus = this.$refs.xTable1.getCurrentRecord()
      let params = {}
      params.companyId = this.companyId
      params.roleId = selectStatus.id
      params.realname = this.formData.realname
      this.tableData2 = []
      this.loadingTable2 = true
      await getRequest('/vatoutinv/sysRoles/getAllSysRoles', params).then(
        (res) => {
          this.loadingTable2 = false
          if (res.code === '200' && res.data.length) {
            this.tableData2 = res.data
          }



        },
        (err) => {
          this.loadingTable2 = false
        }
      )
    },
    queryConfigRole() {
      this.tableData1 = []
      this.tableData2 = []
      let params = {}
      getRequest('/vatoutinv/sysRoles/getAllSysRoles', params).then(
        (res) => {
          if (res.code === '200' && res.data.length) {
            this.tableData1 = res.data
            this.$refs.xTable1.setCurrentRow(this.tableData1[0])
            this.clickxTable1({row: this.tableData1[0]})
          } else {
          }
        },
        (err) => {
        }
      )
    },

  },
  created() {
    
    this.queryConfigRole()
  },
  watch: {},
}
</script>
<style lang='scss' scoped>
</style>